<template>
  <router-view v-if="path=='/login'" />
  <el-container v-else>
    <el-header>
      <div class="logo">
        <img src="@/assets/logo.png" />
      </div>

      <div class="header">
        <div v-if="secondMenu.show" class="menu-title">{{ secondMenu.title }}</div>
        <div class="header-right">
          <div class="breadcrumb"></div>
          <div class="user">管理员</div>
        </div>
      </div>
    </el-header>

    <el-container class="mian-container">
      <el-aside :width="!secondMenu.show ? '100px':'230px'">
        <div class="first-div">
          <el-menu background-color="#363638" text-color="#94969d" active-text-color="rgba(255, 255, 255, 1)" :default-active="indexFirst">
            <el-menu-item v-for="(item,index) in menus" @click="handleOneMenu( index, item )" :key="index" :index="index">
              <em class="iconfont" :class="item.icon"></em>
              <span>{{ item.name }}</span>
            </el-menu-item>
          </el-menu>
        </div>
        <div class="second-div">
          <el-menu class="el-menu-vertical-demo" :default-active="secondMenu.index" :default-openeds="secondMenu.openeds">
            <template v-for="(item,index) in secondMenu.menus" :key="index" :index="index">
              <el-sub-menu v-if="item.children" :index="index">
                <template #title>
                  <el-icon>
                    <location />
                  </el-icon>
                  <span>{{ item.name }}</span>
                </template>
                <el-menu-item-group v-for="(subitem ,subindex) in item.children" :key="subindex">
                  <el-menu-item @click="handleSecondMenu( `${index}-${subindex}`, subitem ,item.path)" :index="`${index}-${subindex}`">{{ subitem.name }}</el-menu-item>
                </el-menu-item-group>
              </el-sub-menu>
              <el-menu-item @click="handleSecondMenu( index, item )" :index="index" v-else>
                <em class="iconfont" :class="item.icon"></em>
                <span>{{ item.name }}</span>
              </el-menu-item>
            </template>
          </el-menu>
        </div>

      </el-aside>
      <el-main>
        <div class="main-info">

          <keep-alive v-if="route.meta.keepAlive">
            <router-view :to="key" :key="key" />
          </keep-alive>
          <router-view :to="key" v-else :key="key" />
        </div>
      </el-main>
    </el-container>

  </el-container>
</template>
<script lang="ts" setup>
import { ref, onMounted, watch, computed } from 'vue'
import { useStore } from 'vuex'
import { useRoute, useRouter } from 'vue-router'

interface ISecondMenu {
  show: boolean //是否显示
  title: string //标题
  menus: any //下级数组
  index: nay //当前选中
  openeds: Array //展开
}
interface INavigation {
  one: string
  two: string
  three: string
}

const store = useStore()
const router = useRouter()
const route = useRoute()
const menus = ref<any>([])
const path = ref<string>('') //当前目录
const indexFirst = ref<Number>(0) //当前一级菜单选中项
const breadcrumbs = ref<Array>([]) //面包屑
const secondMenu = ref<ISecondMenu>({ show: false, title: '', menus: [], index: 0, openeds: [0] }) //是否显示二级菜单
const navigation = ref<INavigation>({ one: '', two: '', three: '' })

const key = computed(() => {
  return route.path
})

menus.value = store.getters.menus

//获取导航列表
const getMenus = (): void => {
  if (store.getters.token)
    store.dispatch('getMenus').then((res: any) => {
      menus.value = store.getters.menus
      openMenu()
    })
  else {
    router.push('/login')
  }
}

//刷新页面导航绑定
const openMenu = (): void => {
  route.path.split('/').forEach((item: string) => {
    if (item) {
      if (!navigation.value.one) navigation.value.one = item
      else if (!navigation.value.two) navigation.value.two = item
      else if (!navigation.value.three) navigation.value.three = item
    }
  })

  if (navigation.value.one) {
    menus.value.forEach((oneMenu: any, oneIndex: number) => {
      if (oneMenu.path === navigation.value.one) {
        indexFirst.value = oneIndex
        //二级绑定
        if (navigation.value.two) {
          secondMenu.value.show = true
          secondMenu.value.title = oneMenu.name
          secondMenu.value.menus = oneMenu.children
          oneMenu.children.forEach((twoMenu: any, twoIndex: number) => {
            if (twoMenu.path === navigation.value.two) {
              secondMenu.value.index = twoIndex
              //三级绑定
              if (navigation.value.three) {
                twoMenu.children.forEach((threeMenu: any, threeIndex: number) => {
                  secondMenu.value.index = `${twoIndex}-${threeIndex}`
                  secondMenu.value.openeds = [twoIndex]
                })
              }
              //三级绑定 end
            }
          })
        }
        //二级绑定end
      }
    })
  }
}
//点击一级导航
const handleOneMenu = (index: Number, item: any): void => {
  indexFirst.value = index
  secondMenu.value.index = 0
  if (item.children) {
    secondMenu.value.show = true
    secondMenu.value.title = item.name
    secondMenu.value.menus = item.children

    //跳转页面
    if (item.children[0].children) {
      navigation.value = { one: item.path, two: item.children[0].path, three: item.children[0].children[0].path }
      secondMenu.value.index = '0-0'
      Tonavigation()
    } else {
      navigation.value = { one: item.path, two: item.children[0].path, three: '' }
      Tonavigation()
    }
  } else {
    navigation.value = { one: item.path, two: '', three: '' }
    Tonavigation()
    secondMenu.value.show = false
    secondMenu.value.title = ''
    secondMenu.value.menus = []
  }
}
const handleSecondMenu = (index: String, item: any, subpath: String): void => {
  secondMenu.value.index = index
  if (subpath) {
    navigation.value.two = subpath
    navigation.value.three = item.path
  } else navigation.value.two = item.path
  Tonavigation()
}

const Tonavigation = (): void => {
  var url = `/${navigation.value.one}`
  if (navigation.value.two) url += `/${navigation.value.two}`
  if (navigation.value.three) url += `/${navigation.value.three}`

  router.push(url)
}

watch(
  () => route.fullPath,
  (n, o) => {
    store.commit('SET_CURRENTPAGE', n)
    if (!menus.value.length) menus.value = store.getters.menus
    path.value = n
  }
)
onMounted(() => {
  getMenus()
})
</script>
<style lang="scss" scoped>
.el-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: 60px;
  background-color: #ffffff;
  .logo {
    width: 100px;
    background-color: #363638;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    line-height: 60px;
    text-align: center;
    color: #009688;
    font-size: 16px;
    img {
      margin-top: 5px;
      width: 50px;
      height: 50px;
    }
  }
  .header {
    position: absolute;
    left: 100px;
    height: 60px;
    right: 0;
    border-bottom: 1px solid #f1f1f1;
    display: flex;
    justify-content: space-between;
    line-height: 60px;
    .menu-title {
      width: 140px;
      text-align: center;
      border-right: 1px solid #f1f1f1;
    }
    .header-right {
      width: 100%;
      display: flex;
      justify-content: space-between;
      .breadcrumb {
        margin-left: 20px;
      }
      .user {
        margin-right: 20px;
      }
    }
  }
}
.mian-container {
  margin-top: 60px;
  height: calc(100vh - 60px);
  .el-aside {
    overflow: auto;
    height: 100%;
    display: flex;
    scrollbar-width: none;
    -ms-overflow-style: none;
    z-index: 99999;
    ::-webkit-scrollbar {
      display: none;
    }

    .el-menu {
      width: 100px;
      height: 100%;
      border: 0;
      span {
        margin-left: 5px;
      }
    }
    .el-menu-vertical-demo {
      width: 150px;
      border-right: 1px solid #f1f1f1;
    }
  }
  .el-main {
    background-color: #fff;
    margin: 10px;
    overflow: auto;
  }
}
.main-info {
  padding: 10px 10px 0 0;
}
</style>